<template>
  <div>
    <FormPanel ref="from" :list="formList" :isSubmitBtn="false" :collapse="false" :labelPosition="'top'" :labelWidth="130" :cols="3" />
    <FilterTable ref="table" :isMemoryPagination="true" :isSelectColumn="false" height="auto" :columns="columns" :dataSource="tableList" :onColumnsChange="(columns) => (this.columns = columns)">
    </FilterTable>
    <FilterTable ref="tableUp" :columns="columnsUp" :dataSource="tableListUp" :isMemoryPagination="true" :isSelectColumn="false" height="auto" :onColumnsChange="(columns) => (this.columns = columns)">
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <el-button @click="closeDrawer()">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { queryBigCustomerById } from '@/api/omSaleP/KeyCustomers/OrderReview/index.js';
import { getDetail, queryAllSeries, queryAllModelBySeries } from '@/api/omSaleP/KeyCustomers/KeyCustomerInfo/index.js';
import { dictionary } from '@/utils/dictMixin';
import config from '@/assets/js/config';
export default {
  props: ['rowData'],
  data() {
    return {
      formList: this.createdFrom(),
      columns: this.createdTable(),
      columnsUp: this.createdTableUp(),
      tableList: [],
      tableListUp: [],
      datailData: {},
      demandSeries: [],
      demandModel: [],
    };
  },
  created() {
    //初始化省份数据
    this.initProvince();
  },
  mounted() {
    //获取所有车系数据
    this.queryAllSeries();
    //初始化数据
    this.init();
  },
  mixins: [dictionary],
  methods: {
    async init() {
      if (this.rowData.customerId) {
        const res = await queryBigCustomerById({ bigCustomerId: this.rowData.customerId });
        let data = {};
        if (res.resultCode === 200) {
          data = res.data;
          this.datailData = res.data;
        }
        this.formList.map(async (x) => {
          if (x.attachmentType) {
            data[x.fieldName].forEach((item) => {
              item.name = item.attachmentName;
              item.url = item.attachmentUrl;
              item.uid = item.attachmentUuid;
            });
          }
          if (data.provinceId && x.fieldName === 'provinceId') {
            await this.initCity(data.provinceId);
          }
          if (data.cityId && x.fieldName === 'cityId') {
            await this.initRegion(data.cityId);
          }
          x.initialValue = data[x.fieldName];
        });
        this.tableList = data.demandList;
        this.tableList.forEach(async (item) => {
          item.demandSeriesName = this.getName(this.demandSeries, item.demandSeriesId);
          await this.queryAllModelBySeries(item.demandSeriesId);
          item.demandModelName = this.getName(this.demandModel, item.demandModelId);
          this.$forceUpdate();
        });
        this.tableListUp = data.followList;
        this.$forceUpdate();
      }
    },
    // 获取所有车系
    async queryAllSeries() {
      const res = await queryAllSeries();
      if (res.resultCode === 200) {
        this.demandSeries = res.data.map((y) => ({ text: y.seriesName, value: y.seriesId }));
      }
    },
    //根据车系id查询车型
    async queryAllModelBySeries(id) {
      if (id) {
        const res = await queryAllModelBySeries({ pageNum: id });
        if (res.resultCode === 200) {
          this.demandModel = res.data.map((y) => ({ text: y.modelName, value: y.modelId }));
        }
      }
    },
    // 获取车系、车型名称
    getName(list, id) {
      const filterList = list.filter((item) => item.value === id);
      if (filterList.length > 0) {
        return filterList[0].text;
      }
      return '';
    },
    //初始化所在省份
    async initProvince() {
      let pl = await this.createRegionsList();
      this.formList.find((item) => item.fieldName == 'provinceId').itemList = pl;
    },
    //初始化所在市数据
    async initCity(provinceId) {
      //清空市
      this.clearFormItem(this.formList.find((item) => item.fieldName == 'cityId'));
      this.clearFormItem(this.formList.find((item) => item.fieldName == 'districtId'));
      if (!provinceId || provinceId == null || typeof provinceId == 'undefined') {
        return;
      }
      //取城市数据
      let rd = this.createcityList(provinceId);
      this.formList.find((item) => item.fieldName == 'cityId').itemList = rd;
    },
    // 获取区县
    async initRegion(regionId) {
      this.clearFormItem(this.formList.filter((x) => x.fieldName === 'districtId')[0]);
      if (!regionId) return;
      let rd = this.district(regionId);
      this.formList.find((item) => item.fieldName == 'districtId').itemList = rd;
    },
    // 清除
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    closeDrawer() {
      this.$emit('close');
    },
    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '大客户基础信息',
        },
        {
          type: 'INPUT',
          label: '大客户编号',
          fieldName: 'customersNo',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '大客户来源',
          fieldName: 'customersType',
          placeholder: '',
          disabled: true,
          itemList: this.createDictList('2108'),
        },
        {
          type: 'SELECT',
          label: '大客户类型',
          placeholder: '',
          disabled: true,
          fieldName: 'customerType',
          itemList: this.createDictList('2117'),
        },
        {
          type: 'INPUT',
          label: '大客户名称',
          disabled: true,
          fieldName: 'customersName',
        },
        {
          type: 'INPUT',
          label: '运营单位联系人',
          disabled: true,
          fieldName: 'contactsName',
        },
        {
          type: 'INPUT',
          label: '运营单位联系电话',
          disabled: true,
          fieldName: 'customerPhone',
        },
        {
          type: 'SELECT',
          label: '省份',
          placeholder: '',
          itemList: [],
          disabled: true,
          fieldName: 'provinceId',
        },
        {
          type: 'SELECT',
          label: '城市',
          placeholder: '',
          itemList: [],
          disabled: true,
          fieldName: 'cityId',
        },
        {
          type: 'SELECT',
          label: '县区',
          fieldName: 'districtId',
          placeholder: '',
          itemList: [],
          disabled: true,
          itemList: [],
        },
        {
          type: 'INPUT',
          label: '联系地址',
          disabled: true,
          maxlength: 36,
          fieldName: 'addressName',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'credentialsType',
          placeholder: '',
          disabled: true,
          itemList: this.createDictList('2120'),
        },
        {
          type: 'INPUT',
          label: '证件号',
          fieldName: 'credentialsNo',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '法人代表姓名',
          disabled: true,
          fieldName: 'legalPersonName',
        },
        {
          type: 'INPUT',
          label: '法人身份证号',
          disabled: true,
          fieldName: 'legalPersonIdCard',
        },
        {
          type: 'INPUT',
          label: '法人代表手机',
          disabled: true,
          fieldName: 'legalPersonMobile',
        },
        {
          type: 'INPUT',
          label: '授权人身份证号',
          disabled: true,
          fieldName: 'authorizationPersonIdCard',
        },
        {
          type: 'INPUT',
          label: '传真',
          disabled: true,
          fieldName: 'fax',
        },
        {
          type: 'INPUT',
          label: '邮编',
          disabled: true,
          fieldName: 'zipCode',
        },
        {
          type: 'INPUT',
          label: 'SAP客户编号',
          fieldName: 'sapCustomersNo',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '是否绑定SAP客户编号',
          fieldName: 'isBind',
          disabled: true,
          placeholder: '',
          itemList: this.createDictList('1004'),
          offsetRightCols: 1,
        },
        {
          type: 'BREAK_SPACE',
          label: '',
        },
        {
          type: 'UPLOAD_FILE',
          label: '法人身份证正面',
          fieldName: 'legalPersonIdCodeFrontList',
          disabled: true,
          attachmentType: 11131001,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '法人身份证反面',
          fieldName: 'legalPersonIdCodeReverseList',
          attachmentType: 11131002,
          disabled: true,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '管理员授权文件',
          attachmentType: 11131003,
          fieldName: 'administratorAuthorizationFileList',
          disabled: true,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '授权人身份证正面',
          attachmentType: 11131004,
          fieldName: 'authorizationIdCardFrontList',
          disabled: true,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '授权人身份证反面',
          attachmentType: 11131005,
          fieldName: 'authorizationIdCardReverseList',
          disabled: true,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '营业执照',
          fieldName: 'businessLicenseList',
          attachmentType: 11131006,
          disabled: true,
          selfCols: 1,
          initialValue: [],
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'BREAK_SPACE',
          label: '大客户需求信息',
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '需求车系',
          dataIndex: 'demandSeriesId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{p.row.demandSeriesName}</span>;
          },
        },
        {
          title: '需求车型',
          dataIndex: 'demandModelId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{p.row.demandModelName}</span>;
          },
        },
        {
          title: '需求数量',
          dataIndex: 'demandNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '预计采购时间',
          dataIndex: 'expectPurchaseDate',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '采购方式',
          dataIndex: 'purchaseType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.purchaseType, '2142')}</span>;
          },
        },
        {
          title: '预计采购价格',
          dataIndex: 'expectPurchasePrice',
          sorter: true,
          filter: true,
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
        {
          title: '市场指导价',
          dataIndex: 'marketDirectivePrice',
          sorter: true,
          filter: true,
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
      ];
    },
    createdTableUp() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '意向级别',
          dataIndex: 'intentionType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.intentionType, '2143')}</span>;
          },
        },
        {
          title: '跟进结果',
          dataIndex: 'followResultType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.followResultType, '2144')}</span>;
          },
        },
        {
          title: '跟进时间',
          dataIndex: 'followDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '跟进方式',
          dataIndex: 'followType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.followType, '2145')}</span>;
          },
        },
        {
          title: '跟进内容',
          dataIndex: 'followContent',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '跟进人',
          dataIndex: 'followPersonName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '预计下次跟进时间',
          dataIndex: 'nextFollowDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd',
        },
      ];
    },
  },
};
</script>
<style lang="scss">
.upload-btn {
  width: 100%;
}
.el-upload-list__item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}
</style>
